<template>
  <Designer ref="ddesigner" :isShowLayout="true">
    <template v-slot:header>
      <div class="design-name">{{ state.name }}</div>
    </template>
  </Designer>
</template>

<script>
import Designer from '@daelui/designer'
import manifest from '../../manifest.js'

export default {
  components: {
    Designer
  },

  data() {
    return {
      designer: {},
      state: {
        id: '',
        pid: '',
        name: '',
        meta: {},
        layout: '',
        description: '',
        status: 1,
        order: 1
      }
    }
  },

  mounted() {
    this.initView()
  },

  methods: {
    initView () {
      let designer = this.$refs.ddesigner
      // 监听设计器状态
      this.designer = designer
      this.$watch('designer.isCompile', () => {
        this.$triggerEvent('update-is-compile', this.designer.isCompile)
      })
      this.$bindEvent('init-is-compile', (callback) => {
        if (typeof callback === 'function') {
          callback(this.designer.isCompile)
        }
      })
      // 组件模板
      let cps = manifest.packages
      cps = Array.isArray(cps) ? cps : []
      designer.setComponentCollection(cps)
      // 页面
      let page = {
        id: 'lei62ptotfq5',
        name: 'Molecule分子组件开发环境',
        path: 'dev',
        code: 'dev',
        description: 'Molecule分子组件开发环境',
        status: 1,
        order: 1,
        layout: 'ddesign-layout-grid',
        meta: {
          component: 'div',
          name: 'ddesign-layout-grid',
          properts: {},
          layouts: {},
          events: {},
          resource: {},
          theme: {},
          childComponents: []
        },
        version: '0.0.0',
        labels: ''
      }
      designer.setPageState(page)
      this.state = page
    }
  }
}
</script>

<style lang="less" scoped>

</style>
